<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2553709" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe64d;</span>
                <div class="name">customer_service</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6a6;</span>
                <div class="name">正向</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe8b2;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe614;</span>
                <div class="name">not_followed</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe615;</span>
                <div class="name">liked</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe616;</span>
                <div class="name">not_liked</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe617;</span>
                <div class="name">followed</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe650;</span>
                <div class="name">资产录入</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe611;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe600;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe60f;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe78e;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe73a;</span>
                <div class="name">操作-全屏-收缩</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe73b;</span>
                <div class="name">操作-全屏-展开</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe608;</span>
                <div class="name">设备</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe609;</span>
                <div class="name">摄像头</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe60a;</span>
                <div class="name">声音</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe60b;</span>
                <div class="name">麦克风</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe60c;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe60d;</span>
                <div class="name">注意</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe60e;</span>
                <div class="name">网络</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6a8;</span>
                <div class="name">downland</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6dc;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6b4;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe688;</span>
                <div class="name">VIP</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xec1d;</span>
                <div class="name">云端上传</div>
                <div class="code-name">&amp;#xec1d;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe79b;</span>
                <div class="name">triangle_down_fill</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe79c;</span>
                <div class="name">triangle_up_fill</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe69c;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe645;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe646;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe649;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe651;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe653;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe656;</span>
                <div class="name">round_check_fill</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe657;</span>
                <div class="name">round_check</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe658;</span>
                <div class="name">round_close_fill</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe659;</span>
                <div class="name">round_close</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe65a;</span>
                <div class="name">round_right_fill</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe65b;</span>
                <div class="name">round_right</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe65c;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe65e;</span>
                <div class="name">time_fill</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe65f;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe661;</span>
                <div class="name">unfold</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe668;</span>
                <div class="name">like_fill</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe669;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe679;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe690;</span>
                <div class="name">question_fill</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe691;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6a3;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6a4;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6ac;</span>
                <div class="name">refund</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6af;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6b9;</span>
                <div class="name">cart_fill</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6d4;</span>
                <div class="name">square_check_fill</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6d5;</span>
                <div class="name">square</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6da;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6de;</span>
                <div class="name">fold</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6e4;</span>
                <div class="name">info_fill</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6e5;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6f3;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe700;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe6ae;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe736;</span>
                <div class="name">people</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe73c;</span>
                <div class="name">attention_fill</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe73d;</span>
                <div class="name">attention</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe759;</span>
                <div class="name">post</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe769;</span>
                <div class="name">safe</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe612;</span>
                <div class="name">支付宝支付</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe7b2;</span>
                <div class="name">attention_forbid</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe7b3;</span>
                <div class="name">attention_forbid_fill</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe64e;</span>
                <div class="name">微信登录</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe7e1;</span>
                <div class="name">favor_light</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe7ec;</span>
                <div class="name">favor_fill_light</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe76a;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe73e;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon l-iconfont">&#xe689;</span>
                <div class="name">微信支付</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'l-iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.l-iconfont {
  font-family: "l-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="l-iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"l-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-service"></span>
            <div class="name">
              customer_service
            </div>
            <div class="code-name">.l-icon-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-RectangleCopy"></span>
            <div class="name">
              正向
            </div>
            <div class="code-name">.l-icon-RectangleCopy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.l-icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-not_followed"></span>
            <div class="name">
              not_followed
            </div>
            <div class="code-name">.l-icon-not_followed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-liked"></span>
            <div class="name">
              liked
            </div>
            <div class="code-name">.l-icon-liked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-not_liked"></span>
            <div class="name">
              not_liked
            </div>
            <div class="code-name">.l-icon-not_liked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-followed"></span>
            <div class="name">
              followed
            </div>
            <div class="code-name">.l-icon-followed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-youjianico_zichanluru"></span>
            <div class="name">
              资产录入
            </div>
            <div class="code-name">.l-icon-youjianico_zichanluru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-shaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.l-icon-shaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.l-icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-yanzhengma"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.l-icon-yanzhengma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-set1"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.l-icon-set1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-caozuo-quanping-shousuo"></span>
            <div class="name">
              操作-全屏-收缩
            </div>
            <div class="code-name">.l-icon-caozuo-quanping-shousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-caozuo-quanping-zhankai"></span>
            <div class="name">
              操作-全屏-展开
            </div>
            <div class="code-name">.l-icon-caozuo-quanping-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-device"></span>
            <div class="name">
              设备
            </div>
            <div class="code-name">.l-icon-device
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-cameraIcon"></span>
            <div class="name">
              摄像头
            </div>
            <div class="code-name">.l-icon-cameraIcon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-voice"></span>
            <div class="name">
              声音
            </div>
            <div class="code-name">.l-icon-voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-microphone"></span>
            <div class="name">
              麦克风
            </div>
            <div class="code-name">.l-icon-microphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-closeIcon"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.l-icon-closeIcon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-warn"></span>
            <div class="name">
              注意
            </div>
            <div class="code-name">.l-icon-warn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-network"></span>
            <div class="name">
              网络
            </div>
            <div class="code-name">.l-icon-network
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-downland"></span>
            <div class="name">
              downland
            </div>
            <div class="code-name">.l-icon-downland
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.l-icon-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.l-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-VIP"></span>
            <div class="name">
              VIP
            </div>
            <div class="code-name">.l-icon-VIP
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-yunduanshangchuan"></span>
            <div class="name">
              云端上传
            </div>
            <div class="code-name">.l-icon-yunduanshangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-triangledownfill"></span>
            <div class="name">
              triangle_down_fill
            </div>
            <div class="code-name">.l-icon-triangledownfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-triangleupfill"></span>
            <div class="name">
              triangle_up_fill
            </div>
            <div class="code-name">.l-icon-triangleupfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.l-icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.l-icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.l-icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.l-icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.l-icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.l-icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-roundcheckfill"></span>
            <div class="name">
              round_check_fill
            </div>
            <div class="code-name">.l-icon-roundcheckfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-roundcheck"></span>
            <div class="name">
              round_check
            </div>
            <div class="code-name">.l-icon-roundcheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-roundclosefill"></span>
            <div class="name">
              round_close_fill
            </div>
            <div class="code-name">.l-icon-roundclosefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-roundclose"></span>
            <div class="name">
              round_close
            </div>
            <div class="code-name">.l-icon-roundclose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-roundrightfill"></span>
            <div class="name">
              round_right_fill
            </div>
            <div class="code-name">.l-icon-roundrightfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-roundright"></span>
            <div class="name">
              round_right
            </div>
            <div class="code-name">.l-icon-roundright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.l-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-timefill"></span>
            <div class="name">
              time_fill
            </div>
            <div class="code-name">.l-icon-timefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.l-icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-unfold"></span>
            <div class="name">
              unfold
            </div>
            <div class="code-name">.l-icon-unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-likefill"></span>
            <div class="name">
              like_fill
            </div>
            <div class="code-name">.l-icon-likefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.l-icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.l-icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-questionfill"></span>
            <div class="name">
              question_fill
            </div>
            <div class="code-name">.l-icon-questionfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.l-icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.l-icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.l-icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-refund"></span>
            <div class="name">
              refund
            </div>
            <div class="code-name">.l-icon-refund
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.l-icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-cartfill"></span>
            <div class="name">
              cart_fill
            </div>
            <div class="code-name">.l-icon-cartfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-squarecheckfill"></span>
            <div class="name">
              square_check_fill
            </div>
            <div class="code-name">.l-icon-squarecheckfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-square"></span>
            <div class="name">
              square
            </div>
            <div class="code-name">.l-icon-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.l-icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-fold"></span>
            <div class="name">
              fold
            </div>
            <div class="code-name">.l-icon-fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-infofill"></span>
            <div class="name">
              info_fill
            </div>
            <div class="code-name">.l-icon-infofill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.l-icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.l-icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.l-icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.l-icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-people"></span>
            <div class="name">
              people
            </div>
            <div class="code-name">.l-icon-people
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-attentionfill"></span>
            <div class="name">
              attention_fill
            </div>
            <div class="code-name">.l-icon-attentionfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-attention"></span>
            <div class="name">
              attention
            </div>
            <div class="code-name">.l-icon-attention
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-post"></span>
            <div class="name">
              post
            </div>
            <div class="code-name">.l-icon-post
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-safe"></span>
            <div class="name">
              safe
            </div>
            <div class="code-name">.l-icon-safe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-zhifubaozhifu"></span>
            <div class="name">
              支付宝支付
            </div>
            <div class="code-name">.l-icon-zhifubaozhifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-attentionforbid"></span>
            <div class="name">
              attention_forbid
            </div>
            <div class="code-name">.l-icon-attentionforbid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-attentionforbidfill"></span>
            <div class="name">
              attention_forbid_fill
            </div>
            <div class="code-name">.l-icon-attentionforbidfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-weixin"></span>
            <div class="name">
              微信登录
            </div>
            <div class="code-name">.l-icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-favor_light"></span>
            <div class="name">
              favor_light
            </div>
            <div class="code-name">.l-icon-favor_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-favor_fill_light"></span>
            <div class="name">
              favor_fill_light
            </div>
            <div class="code-name">.l-icon-favor_fill_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-email"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.l-icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.l-icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon l-iconfont l-icon-weixinzhifu"></span>
            <div class="name">
              微信支付
            </div>
            <div class="code-name">.l-icon-weixinzhifu
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="l-iconfont l-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            l-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-service"></use>
                </svg>
                <div class="name">customer_service</div>
                <div class="code-name">#l-icon-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-RectangleCopy"></use>
                </svg>
                <div class="name">正向</div>
                <div class="code-name">#l-icon-RectangleCopy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#l-icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-not_followed"></use>
                </svg>
                <div class="name">not_followed</div>
                <div class="code-name">#l-icon-not_followed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-liked"></use>
                </svg>
                <div class="name">liked</div>
                <div class="code-name">#l-icon-liked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-not_liked"></use>
                </svg>
                <div class="name">not_liked</div>
                <div class="code-name">#l-icon-not_liked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-followed"></use>
                </svg>
                <div class="name">followed</div>
                <div class="code-name">#l-icon-followed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-youjianico_zichanluru"></use>
                </svg>
                <div class="name">资产录入</div>
                <div class="code-name">#l-icon-youjianico_zichanluru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-shaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#l-icon-shaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#l-icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-yanzhengma"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#l-icon-yanzhengma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-set1"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#l-icon-set1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-caozuo-quanping-shousuo"></use>
                </svg>
                <div class="name">操作-全屏-收缩</div>
                <div class="code-name">#l-icon-caozuo-quanping-shousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-caozuo-quanping-zhankai"></use>
                </svg>
                <div class="name">操作-全屏-展开</div>
                <div class="code-name">#l-icon-caozuo-quanping-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-device"></use>
                </svg>
                <div class="name">设备</div>
                <div class="code-name">#l-icon-device</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-cameraIcon"></use>
                </svg>
                <div class="name">摄像头</div>
                <div class="code-name">#l-icon-cameraIcon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-voice"></use>
                </svg>
                <div class="name">声音</div>
                <div class="code-name">#l-icon-voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-microphone"></use>
                </svg>
                <div class="name">麦克风</div>
                <div class="code-name">#l-icon-microphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-closeIcon"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#l-icon-closeIcon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-warn"></use>
                </svg>
                <div class="name">注意</div>
                <div class="code-name">#l-icon-warn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-network"></use>
                </svg>
                <div class="name">网络</div>
                <div class="code-name">#l-icon-network</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-downland"></use>
                </svg>
                <div class="name">downland</div>
                <div class="code-name">#l-icon-downland</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#l-icon-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#l-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-VIP"></use>
                </svg>
                <div class="name">VIP</div>
                <div class="code-name">#l-icon-VIP</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-yunduanshangchuan"></use>
                </svg>
                <div class="name">云端上传</div>
                <div class="code-name">#l-icon-yunduanshangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-triangledownfill"></use>
                </svg>
                <div class="name">triangle_down_fill</div>
                <div class="code-name">#l-icon-triangledownfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-triangleupfill"></use>
                </svg>
                <div class="name">triangle_up_fill</div>
                <div class="code-name">#l-icon-triangleupfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#l-icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#l-icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#l-icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#l-icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#l-icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#l-icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-roundcheckfill"></use>
                </svg>
                <div class="name">round_check_fill</div>
                <div class="code-name">#l-icon-roundcheckfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-roundcheck"></use>
                </svg>
                <div class="name">round_check</div>
                <div class="code-name">#l-icon-roundcheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-roundclosefill"></use>
                </svg>
                <div class="name">round_close_fill</div>
                <div class="code-name">#l-icon-roundclosefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-roundclose"></use>
                </svg>
                <div class="name">round_close</div>
                <div class="code-name">#l-icon-roundclose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-roundrightfill"></use>
                </svg>
                <div class="name">round_right_fill</div>
                <div class="code-name">#l-icon-roundrightfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-roundright"></use>
                </svg>
                <div class="name">round_right</div>
                <div class="code-name">#l-icon-roundright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#l-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-timefill"></use>
                </svg>
                <div class="name">time_fill</div>
                <div class="code-name">#l-icon-timefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#l-icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-unfold"></use>
                </svg>
                <div class="name">unfold</div>
                <div class="code-name">#l-icon-unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-likefill"></use>
                </svg>
                <div class="name">like_fill</div>
                <div class="code-name">#l-icon-likefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#l-icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#l-icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-questionfill"></use>
                </svg>
                <div class="name">question_fill</div>
                <div class="code-name">#l-icon-questionfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#l-icon-question</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#l-icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#l-icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-refund"></use>
                </svg>
                <div class="name">refund</div>
                <div class="code-name">#l-icon-refund</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#l-icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-cartfill"></use>
                </svg>
                <div class="name">cart_fill</div>
                <div class="code-name">#l-icon-cartfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-squarecheckfill"></use>
                </svg>
                <div class="name">square_check_fill</div>
                <div class="code-name">#l-icon-squarecheckfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-square"></use>
                </svg>
                <div class="name">square</div>
                <div class="code-name">#l-icon-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#l-icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-fold"></use>
                </svg>
                <div class="name">fold</div>
                <div class="code-name">#l-icon-fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-infofill"></use>
                </svg>
                <div class="name">info_fill</div>
                <div class="code-name">#l-icon-infofill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#l-icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#l-icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-sort"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#l-icon-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#l-icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-people"></use>
                </svg>
                <div class="name">people</div>
                <div class="code-name">#l-icon-people</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-attentionfill"></use>
                </svg>
                <div class="name">attention_fill</div>
                <div class="code-name">#l-icon-attentionfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-attention"></use>
                </svg>
                <div class="name">attention</div>
                <div class="code-name">#l-icon-attention</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-post"></use>
                </svg>
                <div class="name">post</div>
                <div class="code-name">#l-icon-post</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-safe"></use>
                </svg>
                <div class="name">safe</div>
                <div class="code-name">#l-icon-safe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-zhifubaozhifu"></use>
                </svg>
                <div class="name">支付宝支付</div>
                <div class="code-name">#l-icon-zhifubaozhifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-attentionforbid"></use>
                </svg>
                <div class="name">attention_forbid</div>
                <div class="code-name">#l-icon-attentionforbid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-attentionforbidfill"></use>
                </svg>
                <div class="name">attention_forbid_fill</div>
                <div class="code-name">#l-icon-attentionforbidfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-weixin"></use>
                </svg>
                <div class="name">微信登录</div>
                <div class="code-name">#l-icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-favor_light"></use>
                </svg>
                <div class="name">favor_light</div>
                <div class="code-name">#l-icon-favor_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-favor_fill_light"></use>
                </svg>
                <div class="name">favor_fill_light</div>
                <div class="code-name">#l-icon-favor_fill_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-email"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#l-icon-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#l-icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#l-icon-weixinzhifu"></use>
                </svg>
                <div class="name">微信支付</div>
                <div class="code-name">#l-icon-weixinzhifu</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
